import { Collapse, Tag ,List} from 'antd-mobile';
import React,{  useState } from 'react'
import { useLocation } from 'react-router-dom'
function Index() {
  const { state } = useLocation()
   const sitList = ["经济舱", "商务舱", "头等舱"];
  const sitPrices = [
    state.lps[0].atp,
    state.lps[0].atp * 2,
    state.lps[0].atp * 4,
  ];
  return (
    <div>
      <div >
        <div >
          <div>
            <p>{state.dst}</p>
            <p>
              {state.dasn} {state.dat}
            </p>
          </div>
          <div style={{ margin: "0 10px" }}>→</div>
          <div>
            <p>{state.ast}</p>
            <p>
              {state.aasn} {state.aat}
            </p>
          </div>
        </div>
        <div >￥{state.lps[0].atp}</div>
      </div>
      <div>
        <span>{state.ss[0].asn}</span> | <span>{state.ss[0].amn}</span>
      </div>
        <Collapse
          accordion
          arrowIcon={(active) =>
            active ? (
              <Tag color="warning">收起</Tag>
            ) : (
              <Tag color="warning">预定</Tag>
            )
          }
        >
          {sitList.map((item, index) => (
            <Collapse.Panel key={index} title={`${item} ${sitPrices[index]}`}>
              <List>
                <List.Item
                  arrowIcon={
                    <Tag color="orange" fill="outline">
                      买票
                    </Tag>
                  }
                  description={<span>含40元出行保障 快速出票 迅捷无忧</span>}
                >
                  快速预订
                </List.Item>
                <List.Item
                  arrowIcon={
                    <Tag color="orange" fill="outline">
                      买票
                    </Tag>
                  }
                  description={<span>出票较慢，高峰期需要排队</span>}
                >
                  普通预订
                </List.Item>
              </List>
            </Collapse.Panel>
          ))}
        </Collapse>
    </div>
  )
}

export default Index